<template>
  <!-- 扫码交接 -->
  <view class="scan-transfer">
    <view v-if="info.userId && !showEmpty" class="list">
      <pane-card class="user" :title="info.username" :subTitle="info.level ? '密接人员' : '次密接人员'">
        <view class="avator" slot="icon">
          <img :src="info.avator" alt="" />
        </view>
        <text class="right-text" slot="right">{{ info.date }}</text>
      </pane-card>
      <view class="title">
        <text class="block strong">基本情况</text>
      </view>
      <uni-list>
        <uni-list-item title="姓名" :rightText="info.username"></uni-list-item>
        <uni-list-item title="性别" :rightText="info.gender"></uni-list-item>
        <uni-list-item title="身份证号" :rightText="info.idCard"></uni-list-item>
      </uni-list>
      <view class="title">
        <text class="block strong">隔离情况</text>
      </view>
      <uni-list>
        <uni-list-item title="隔离点" :rightText="info.address"></uni-list-item>
        <uni-list-item title="隔离房间" :rightText="info.room"></uni-list-item>
        <uni-list-item title="负责医生" :rightText="info.doctor"></uni-list-item>
        <uni-list-item title="末次暴露时间" :rightText="info.endOutTime"></uni-list-item>
        <uni-list-item title="隔离开始时间" :rightText="info.startTime"></uni-list-item>
      </uni-list>
      <view class="options">
        <view class="item">
          <button type="primary" @tap="transfer(0)">采样</button>
          <button type="primary" @tap="timeline">时间轴</button>
        </view>
        <view class="item">
          <button class="mini" type="primary" @tap="transfer(1)">从隔离点转出</button>
          <button class="mini" type="primary" @tap="transfer(2)">转运到医院</button>
          <button class="mini" type="primary" @tap="transfer(3)">从医院转出</button>
          <button class="mini" type="primary" @tap="transfer(4)">转运到隔离点</button>
        </view>
        <!-- <button class="btn" type="primary" @tap="timeline">时间点</button>
        <button class="btn" type="primary" @tap="timeline">时间点</button>
        <button class="btn" type="primary" @tap="timeline">时间点</button> -->
      </view>
    </view>
    <v-empty :isShow="showEmpty" text="暂无相关记录"></v-empty>
  </view>
</template>
<script>
import PaneCard from '@/components/m-card/pane-card.vue';
import Api from '@/api/main';
import VEmpty from '@/components/v-empty/index.vue';
export default {
  components: {
    PaneCard,
    VEmpty
  },
  data() {
    return {
      showEmpty: false,
      code: '',
      info: {
        // // 隔离人员id
        // userId: '1',
        // // 隔离人员姓名
        // username: '章三',
        // avator: require('../../static/img/user.png'),
        // // 0密切接触，1次密接触
        // level: 1,
        // // 日期
        // date: '2021-08',
        // // 性别，0男，1女
        // gender: 0,
        // // 身份证号
        // idCard: '123123',
        // // 隔离地点
        // address: '地点1',
        // // 隔离房间
        // room: '房间103',
        // // 负责医生
        // doctor: '张医生',
        // // 隔离开始时间
        // startTime: '2021-09-01',
        // // 末次暴露时间
        // endOutTime: '2021-0901'
      }
    };
  },
  onLoad(obj) {
    this.code = obj.code;
    this.getUser();
  },
  methods: {
    timeline() {
      uni.navigateTo({
        url: `/pages/scan/timeline?title=${this.info.username || ''}的隔离时间轴&userId=${this.info.userId || ''}&code=${this.code || ''}`,
        title: this.info.username
      });
    },
    // 查询用户信息
    async getUser() {
      uni.showLoading({
        title: '加载中...'
      });
      const user = await this.$http.post(Api.getQuarantineInfo, { code: this.code });
      this.info = user || {};
      this.showEmpty = !user;
      uni.hideLoading();
    },
    // 交接
    async transfer(type) {
      const res = await this.$http.post(Api.transfer, { userId: this.info.userId, option: type });
      if (res) {
        this.$toast('交接成功');
      }
    }
  }
};
</script>
<style lang="scss">
.scan-transfer {
  width: 100%;
  padding: 20rpx 0rpx;
  padding-bottom: 240rpx;
  .user {
    margin: 0 40rpx;
  }
  .avator > img {
    width: 102rpx;
    height: 102rpx;
    border-radius: 50%;
  }
  .right-text {
    color: $uni-sub-text-color;
  }
  .list {
    padding-top: 20rpx;
    background-color: rgba($color: $uni-sub-text-color, $alpha: 0.06);
  }
  .title {
    padding: 30rpx 40rpx 30rpx;
    position: relative;
    font-size: 28rpx;
    color: $uni-sub-text-color;
    > text {
      margin-left: 20rpx;
    }
    // &::before {
    //   content: '';
    //   display: inline-block;
    //   width: 4rpx;
    //   height: 80%;
    //   transform: translateY(10%);
    //   background-color: rgba($color: $uni-sub-text-color, $alpha: 0.5);
    //   position: absolute;
    //   left: 0;
    // }
  }
  .btn {
    margin: 20rpx 40rpx;
  }
  .options {
    position: fixed;
    width: 100%;
    bottom: 0;
    left: 0;
    background-color: #fff;
    .item {
      padding: 20rpx 40rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      button {
        width: 200rpx;
        margin: 0;
        padding: 4rpx 40rpx;
        border-radius: 38rpx;
        font-size: 24rpx;
        &.mini {
          width: auto;
          padding: 4rpx 16rpx;
        }
      }
    }
  }
}
</style>
